import React from 'react'

import { Flex } from 'antd-mobile'
import './index.scss'

// 条件筛选栏数组
const titleList = [
  {title: '区域', type: 'area'},
  {title: '方式', type: 'mode'},
  {title: '租金', type: 'price'},
  {title: '筛选', type: 'more'}
]

export default function FilterTitle({titleSatatus, onClick}) {

  return (
    <div className='filterTitle'>
     {
       titleList.map((item:any) => {
         const isACtive = titleSatatus[item.type]
         return <div key={item.type} className={['filterTitle_item', isACtive ? 'active' : ''].join(' ')}
         onClick={() => onClick(item.type)}>
           <Flex>
           <span>{item.title}</span>
           <span className='iconfont'>&#xe65a;</span>
          </Flex>
         </div> 
       })
     }
    </div>
    
  )
}
